import React ,{Component,Fragment}from 'react'
//antd
import { Form, Input, Button,Row,Col } from 'antd';
import { UserOutlined ,PictureOutlined ,LockOutlined } from '@ant-design/icons';
//css
import "../index.scss"

// api
import { Login ,GetCode } from '../../../api/user'

// 验证
import {validate_email} from '../../../utils/validate'
class LoginForm extends Component{
    constructor(){
        super();
        this.state = {
            username:'',
            code_btn_disabled:true,
            code_btn_loading:false,
            code_btn_text:'获取验证码'
        };

    }
    getCode = () =>{
        this.setState({
            code_btn_loading:true,
            code_btn_text:'发送中'
        })
        const  datas = {
            username:this.state.username,
            module: 'login'
        }
        GetCode(datas).then(res=>{
            this.countDown();
            console.log(res);
        }).catch(error =>{
            this.setState({
                code_btn_loading:false,
                code_btn_text:'重新发送'
            })
        })
    }
    inputChange = (e) =>{
        this.setState({
            username:e.target.value
        })
    }
    // 倒计时
    countDown = () =>{
        let second = 60
        let timer = null;

        this.setState({
            code_btn_loading:false,
            code_btn_disabled:true,
            code_btn_text:`${second}s`
        })
        timer = setInterval(()=>{
            second-- ;
            if (second === 0){
                this.setState({
                    code_btn_disabled:false,
                    code_btn_text:'重新获取'
                })
                clearInterval(timer);
            } else {
                this.setState({
                    code_btn_text:`${second}s`
                })
            }

        },1000)
    }
    render(){
        const { username ,code_btn_disabled,code_btn_loading,code_btn_text} = this.state;
        const onFinish = values => {
            Login().then(res =>{

            }).catch(error =>{

            })
            console.log('Received values of form: ', values);
        }
        const toggleForm =() =>{
            this.props.changeView("register");
        }
        const _this = this;
        return (
      <Fragment>
          <div className="form-header">
              <h4 className="column">登录</h4>
              <span onClick={toggleForm}>账号注册</span>
          </div>
          <div className="form-content">
              <Form
                  name="normal_login"
                  className="login-form"
                  initialValues={{ remember: true }}
                  onFinish={onFinish}
              >
                  <Form.Item
                      name="username"
                      rules={[{ required: true, message: 'Please input your Username!' },
                          ({ getFieldValue }) => ({  //ES6 解构
                              validator(_, value) {
                                  if (validate_email(value)) {
                                      _this.setState({
                                          code_btn_disabled:false,
                                      })
                                      return Promise.resolve();
                                  }

                                  return Promise.reject(new Error('邮箱格式不正确'));
                              },
                          })]}
                  >
                      <Input value={username} onChange={this.inputChange} prefix={<UserOutlined />} placeholder="Username" />
                  </Form.Item>
                  <Form.Item
                      name="password"
                      rules={[
                          { required: true, message: 'Please input your Password!' },
                          {pattern:/^[0-9]*$/,message:'必须为数字'},
                          {min:6,message:'不能小于6位'},
                          {max:20,message:'不能大于20位'}
                      ]}
                  >
                      <Input.Password prefix={<LockOutlined/>} placeholder="Password" />
                  </Form.Item>
                  <Form.Item
                      name="Code"
                      rules={[
                          { required: true, message: 'Please input your Password!' },

                          ]}
                  >
                      <Row gutter={13}>
                          <Col className="gutter-row" span={15}>
                              <Input prefix={<PictureOutlined />} placeholder="Code" />
                          </Col>
                          <Col className="gutter-row" span={9}>
                              <Button type="primary"  loading={code_btn_loading} danger block disabled={code_btn_disabled} onClick={this.getCode}>
                                  {code_btn_text}
                              </Button>
                          </Col>
                      </Row>
                  </Form.Item>
                  <Form.Item>
                      <Button type="primary" htmlType="submit" className="login-form-button" block>
                          登录
                      </Button>
                  </Form.Item>
              </Form>
          </div>

      </Fragment>




        )
    }
}

export default LoginForm
